<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单控件要写在表单元素中 form action提交用户信息的服务器地址 -->
    <form action="test.php" method="post">
        <!-- 明文输入框 -->
        用户名：<input type="text">
        <!-- 暗文输入框 -->
        <!-- br强制换行标签 -->
        密码：<input type="password"><br>
        性别：
        <!-- name保存单选按钮的字段  -->
         <!-- 点击文字 单选按钮或者输入框聚焦 label for属性值和id一致 -->
        <label for="list">
            男：<input type="radio" checked name="gender" value="male" id="list">
        </label>
        <!-- 偷懒写法 -->
        <label>
            女：<input type="radio" name="gender" value="female">
        </label><br>
        <!-- checked可以选择单选按钮和复选框默认选中 -->
        爱好：
        游泳：<input type="checkbox" name="hobbies" id="swimming">
        蓝球：<input checked type="checkbox" name="hobbies" id="basketball">
        足球：<input type="checkbox" name="hobbies" id="football"><br>
        <!-- 下拉框 -->
        城市：
            <select name="city" >
                <!-- 下拉选项分组 -->
                 <optgroup label="一线城市">
                    <option value="lanzhou">兰州</option>
                    <option value="tianshui">天水</option>
                    <option value="zhangye" selected>张掖</option>
                 </optgroup>
                 <!-- disabled 禁用 -->
                 <optgroup label="二线城市" disabled>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="chengdu">杭州</option>
                 </optgroup>
            </select><br>
            描述 :<textarea name="des" cols="30" rows="10"></textarea><br>
            生日：<input type="datetime-local">
            日期：<input type="date"><br>
            文件上传:input:<input type="file" ><br>
            滑块：<input type="range" max="100" nin="0" step="10">
            颜色取色器：<input type="color" >
            进度条：<progress min="0" max="100" value="70"></progress>
             <!-- 表单提交按钮 -->
              <input type="submit" value="提交">
    </form>
</body>

</html>